<script setup>
import { ref, watch } from 'vue'
import SvgIcon from '@/components/svgicon/SvgIcon.vue'

const props = defineProps({
  menuList: {
    type: Array,
    required: false,
    default: []
  },
  menuAct: {
    type: String,
    required: false,
    default: ''
  }
})

const emits = defineEmits([ 'toPage' ])

// 监听菜单激活
const menuActed = ref('')
watch(() => props.menuAct, (val) => {
  menuActed.value = val
})

// toPage 打开页面
const toPage = (menu) => {
  if(menu && menu.children && menu.children.length===0 && menu.url && menu.url!=='') {
    menuActed.value = menu.selId
    emits('toPage', menu)
  } else {
    menu.exted = !menu.exted
  }
}
</script>

<template>
  <div>
    <div v-for="menu in props.menuList" :key="menu.selId" class="mt-a">
      <div @click="toPage(menu)" :class="[menuActed===menu.selId ? 'mt-b' : 'mt-c']">
        <div v-if="menu.icon" :style="[{'padding-left': (15*(menu.level-1))+'px'}]"><svg-icon className="mr5 md1" :name="menu.icon" color="#333" width="14" height="14" /></div>
        <div v-else :style="[{'padding-left': (15*(menu.level-1))+'px'}]"></div>
        <div class="mt-d dan">{{ menu.menuName }}</div>
        <div class="mt-e" v-show="menu.children && menu.children.length>0"><i class="iconfont" v-html="menu.exted ? '&#xeaa1;' : '&#xeaa6;'"></i></div>
      </div>
      <div v-show="menu.exted && menu.children && menu.children.length>0">
        <menu-tree v-if="menu.children && menu.children.length>0" :menuList="menu.children" :menuAct="menuActed" @toPage="toPage" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.mt-a {cursor: pointer; color: #666;}
.mt-b {width: calc(100% - 3px); padding: 15px 0; display: inline-flex; display: -webkit-inline-flex; align-items: center; border-left: 3px solid #0e9be3; background-color: #e7f3ff; color: #333;}
.mt-c {width: calc(100% - 3px); padding: 15px 0; display: inline-flex; display: -webkit-inline-flex; align-items: center; border-left: 3px solid #FFFFFF; border-bottom: 1px solid #EEE;}
.mt-c:hover {background-color: #e7f3ff; border-left: 3px solid #0e9be3;}
.mt-d {flex-grow: 1;}
.mt-e {padding-right: 10px;}
</style>
